<template>
	<view class="page-content">
		<view class="page-title">基本使用</view><ui-br />
		<view class="page-tips">在组件<span class="span-code">ct-button</span>中书写内容</view><ui-br />
		<ui-code :code="code"></ui-code><ui-br />
		<!-- 按钮 -->
		<view class="page-title">设置按钮的多种类型</view><ui-br />
		<view class="page-tips">按钮基本样式</view><ui-br />
		<view><ct-button>主要按钮</ct-button></view><ui-br />
		<view class="page-tips">添加<span class="span-code">width='300rpx'</span>属性控制按钮宽度</view><ui-br />
		<view><ct-button width="300rpx">主要按钮</ct-button></view><ui-br />
		<view class="page-tips">添加<span class="span-code">plain</span>属性控制按钮镂空状态</view><ui-br />
		<view><ct-button plain>主要按钮</ct-button></view><ui-br />
		<view class="page-tips">添加<span class="span-code">size</span>属性控制按钮大小</view><ui-br />
		<view><ct-button size="large">主要按钮</ct-button></view><ui-br />
		<view class="page-tips">添加<span class="span-code">backgroundColor</span>属性控制背景样式，不可自定义颜色，默认主题色</view><ui-br />
		<view><ct-button size="large" backgroundColor>主要按钮</ct-button></view><ui-br />
		<view class="page-tips">设置<span class="span-code">type="default"</span></view><ui-br />
		<view><ct-button type="default" plain>主要按钮</ct-button></view><ui-br />
		<view><ct-button type="default">主要按钮</ct-button></view><ui-br />
		<view class="page-tips">自定义样式</view><ui-br />
		<view><ct-button btnRadius='50rpx' color="#33C2B4">主要按钮</ct-button></view><ui-br />
		<view><ct-button btnRadius='50rpx' color="#33C2B4" plain>主要按钮</ct-button></view><ui-br />
		<view class="page-title">属性说明</view><ui-br />
		<ui-table :data="tableData" /><ui-br />
	</view>
</template>

<script>
	import code from './code.js';
	export default {
		data() {
			return {
				tableData: [{
						parameter: 'type',
						values: 'primary'
					},
					{
						parameter: 'size',
						values: 'large / medium / small / mini'
					},
					{
						parameter: 'width',
						values: '百分比 / 像素'
					},
					{
						parameter: 'plain',
						values: 'true / false'
					},
					{
						parameter: 'disabled',
						values: 'true / false'
					},
					{
						parameter: 'btnRadius',
						values: '设置按钮圆角'
					},
					{
						parameter: 'backgroundColor',
						values: 'true / false(会覆盖其他样式)'
					},
					{
						parameter: '@click',
						values: '点击事件'
					},
				],
				code: ""
			}
		},
		created() {
			this.code = code
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>

</style>